<template>
  <div id="Accouting">
      <div class="address">
        <h3>营业管理 > 报表</h3>
      </div>
      <h3 style="color:red">单位 ： 元</h3>
      <el-table
        class="TABLEMINWIDH"
        :data="checkInData"
        style="width: 100%">
        <el-table-column min-width="100%">
            <template slot="header">
              <span class="label0 label">入住</span>
            </template>
            <el-table-column
            prop="d1"
            min-width="25%">
               <template slot="header" slot-scope="">
                <span class="label1 label">今日收入</span>
              </template>
            </el-table-column>
            <el-table-column
            prop="d2"
            min-width="25%">
               <template slot="header" slot-scope="">
                <span class="label1 label">昨日收入</span>
              </template>
            </el-table-column>
            <el-table-column
            prop="d3"
            min-width="25%">
               <template slot="header" slot-scope="">
                <span class="label1 label">本月收入</span>
              </template>
            </el-table-column>
            <el-table-column
            prop="d4"
            min-width="25%">
               <template slot="header" slot-scope="">
                <span class="label1 label">全部收入</span>
              </template>
            </el-table-column>
        </el-table-column>
      </el-table>
      <br><br>
      <el-table
       class="TABLEMINWIDH"
        :data="InventoryData"
        style="width: 100%">
        <el-table-column min-width="100%" >
          <template slot="header">
              <span class="label0 label">商品</span>
            </template>
            <el-table-column
            prop="d1"
            min-width="25%">
               <template slot="header" slot-scope="">
                <span class="label1 label">今日收入</span>
              </template>
            </el-table-column>
            <el-table-column
            prop="d2"
            min-width="25%">
               <template slot="header" slot-scope="">
                <span class="label1 label">昨日收入</span>
              </template>
            </el-table-column>
            <el-table-column
            prop="d3"
            min-width="25%">
               <template slot="header" slot-scope="">
                <span class="label1 label">本月进货支出</span>
              </template>
            </el-table-column>
            <el-table-column
            prop="d4"
            min-width="25%">
               <template slot="header" slot-scope="">
                <span class="label1 label">本月销售收入</span>
              </template>
            </el-table-column>
        </el-table-column>
      </el-table>
      <br><br>
      <el-table
         class="TABLEMINWIDH"
        :data="allData"
        style="width: 100%">
        <el-table-column min-width="100%" >
            <template slot="header">
              <span class="label0 label">汇总</span>
            </template>
            <el-table-column
            prop="d1"
            min-width="50%">
              <template slot="header" slot-scope="">
                <span class="label1 label">总支出</span>
              </template>
            </el-table-column>
            <el-table-column
            prop="d2"
            label="总收入"
            min-width="50%">
             <template slot="header" slot-scope="">
                <span class="label1 label">总收入</span>
              </template>
            </el-table-column>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
import { showMessage } from '@/utils/utils'
import { loadingMixin } from '@/utils/mixins/loading'
import { getC1D1, getC1D2, getC1D3, getC1D4, getC2D1, getC2D2, getC2D3, getC2D4, getC3D1, getC3D2 } from '@/api/api'
export default {
    mixins: [loadingMixin],
    name: 'Accouting',
    data() {
        return {
            checkInData:[{d1:0,d2:0,d3:0,d4:0}],
            InventoryData:[{d1:0,d2:0,d3:0,d4:0}],
            allData:[{d1:0,d2:0}],
        }
    },
    methods: {
      // 格式化价格
      formatPrice(price) {
        return String(price).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      },
      // 加载数据
      async load() {
        getC1D1().then(response => {
           if(!response.data) response.data = 0
           this.checkInData[0].d1 = response.data.toLocaleString()
        }).catch(error =>  showMessage(this, '获取入住今日收入失败！', 'error'))
        getC1D2().then(response => {
           if(!response.data) response.data = 0
           this.checkInData[0].d2 = response.data.toLocaleString()
        }).catch(error =>  showMessage(this, '获取入住昨日收入失败！', 'error'))
        getC1D3().then(response => {
           if(!response.data) response.data = 0
           this.checkInData[0].d3 = response.data.toLocaleString()
        }).catch(error =>  showMessage(this, '获取入住本月收入失败！', 'error'))
        getC1D4().then(response => {
           if(!response.data) response.data = 0
           this.checkInData[0].d4 = response.data.toLocaleString()
        }).catch(error =>  showMessage(this, '获取入住全部收入失败！', 'error'))
        getC2D1().then(response => {
           if(!response.data) response.data = 0
           this.InventoryData[0].d1 = response.data.toLocaleString()
        }).catch(error =>  showMessage(this, '获取商品今日收入失败！', 'error'))
        getC2D2().then(response => {
           if(!response.data) response.data = 0
           this.InventoryData[0].d2 = response.data.toLocaleString()
        }).catch(error =>  showMessage(this, '获取商品昨日收入失败！', 'error'))
        getC2D3().then(response => {
           if(!response.data) response.data = 0
           this.InventoryData[0].d3 = response.data.toLocaleString()
        }).catch(error =>  showMessage(this, '获取商品本月收入失败！', 'error'))
        getC2D4().then(response => {
           if(!response.data) response.data = 0
           this.InventoryData[0].d4 = response.data.toLocaleString()
        }).catch(error =>  showMessage(this, '获取商品全部收入失败！', 'error'))
        getC3D1().then(response => {
          if(!response.data) response.data = 0
          this.allData[0].d1 = response.data.toLocaleString()
        }).catch(error =>  showMessage(this, '获取总支出失败！', 'error'))
        getC3D2().then(response => {
          if(!response.data) response.data = 0
          this.allData[0].d2 = response.data.toLocaleString()
        }).catch(error =>  showMessage(this, '获取总收入失败！', 'error'))
      }
    }
}
</script>

<style>
#Accouting .cell{
    text-align: center;
}
</style>
<style scope>
.address{
  position: relative;
  color: #aa97b0;
  top: -20px;
}
.label{
  color: black;
}
.label0{
  font-size: 2rem;
  line-height: 3rem;
}
.label1{
  font-size: 1.5rem;
  line-height: 2rem;
}
</style>